import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import { useAuth } from '../context/AuthContext';
import {SettingsScreenProps} from '../types/Navigation';

const ProfileScreen: React.FC<SettingsScreenProps> = ({navigation}) => {
  const { user } = useAuth();

  const menuItems = [
    { id: '1', title: '编辑资料', icon: '✏️' },
    { id: '2', title: '我的收藏', icon: '❤️' },
    { id: '3', title: '历史记录', icon: '📚' },
    { id: '4', title: '账户安全', icon: '🔒' },
    { id: '5', title: '设置', icon: '⚙️' }
  ];

  interface MenuItem {
  id: string;
  icon: string;
  title: string;
}

  // 在组件内部定义处理函数
const handleMenuItemPress = (item: MenuItem) => {
  console.log('点击了菜单项:', item.title);
  
  // 根据不同的菜单项执行不同的操作
  switch(item.id) {
    case "1":
      // 处理第一个菜单项
      console.log('编辑资料');
      // navigation.navigate('Settings');
      break;
    case "2":
      break;
    case "3":
      break;
    case "4":
      break;
    case "5":
      // 处理第五个菜单项
      console.log('设置');
      navigation.navigate('Settings');
      break;
    default:
      console.log('未知菜单项');
  }
};

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <Image
          source={{ uri: 'https://via.placeholder.com/100' }}
          style={styles.avatar}
        />
        <Text style={styles.userName}>{user?.name || '用户'}</Text>
        <Text style={styles.userEmail}>{user?.email || 'user@example.com'}</Text>
      </View>

      <View style={styles.statsSection}>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>156</Text>
          <Text style={styles.statLabel}>关注</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>892</Text>
          <Text style={styles.statLabel}>粉丝</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statNumber}>324</Text>
          <Text style={styles.statLabel}>作品</Text>
        </View>
      </View>

      <View style={styles.menuSection}>
        {menuItems.map(item => (
          <TouchableOpacity onPress={() => handleMenuItemPress(item)} key={item.id} style={styles.menuItem}>
            <Text style={styles.menuIcon}>{item.icon}</Text>
            <Text style={styles.menuTitle}>{item.title}</Text>
            <Text style={styles.menuArrow}>›</Text>
          </TouchableOpacity>
        ))}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  header: {
    backgroundColor: 'white',
    alignItems: 'center',
    padding: 20,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 15,
  },
  userName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  userEmail: {
    fontSize: 14,
    color: '#666',
  },
  statsSection: {
    flexDirection: 'row',
    backgroundColor: 'white',
    marginTop: 10,
    paddingVertical: 20,
  },
  statItem: {
    flex: 1,
    alignItems: 'center',
  },
  statNumber: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  statLabel: {
    fontSize: 12,
    color: '#666',
    marginTop: 5,
  },
  menuSection: {
    backgroundColor: 'white',
    marginTop: 10,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5',
  },
  menuIcon: {
    fontSize: 20,
    marginRight: 15,
  },
  menuTitle: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  menuArrow: {
    fontSize: 20,
    color: '#999',
  },
});

export default ProfileScreen;